import React, { useEffect, useState } from 'react'
import request from "../api/request";
import { useNavigate } from 'react-router-dom';

function ListItem() {
    const [list,setList]=useState([]);
    const navigate=useNavigate();
    const getList=async()=>{
        const res=await request.get('/list')
        console.log(res.data.data)
        setList(res.data.data)
    }
    useEffect(()=>{
        getList()
    },[])
  return (
    <div>
      <div>
        {
            list.map((v,i)=>{
                return <dl key={i} style={{display:"flex"}} onClick={()=>navigate('/detail',{state:v})}>
                    <dt>
                        <img src={v.image} alt="" style={{width:"200px", height:"200px"}}/>
                    </dt>
                    <dd>
                        <div style={{lineHeight:"50px"}}>
                            <span>{v.title}</span>
                            <br></br>
                            <span style={{color:"red"}}>￥{v.price}</span>
                            <br></br>
                            <span>{v.date}</span>
                        </div>
                    </dd>
                </dl>
            })
        }
      </div>
    </div>
  )
}

export default ListItem
